๋ง์ดํฌ๋กํ๋ก ํธ์๋์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐ์ ๊ฑธ์น ํจ์จ์ ์ธ ์์กด์ฑ ๊ณต์ ์ ํต์ฌ ๊ธฐ๋ฅ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ํ๋๋ ์ด์ ์ ๊ณต์ ์ค์ฝํ๋ฅผ ์ฌ์ธต์ ์ผ๋ก ํ์ํฉ๋๋ค. ์ฑ๋ฅ๊ณผ ์ ์ง๋ณด์์ฑ ํฅ์์ ์ํด ์ด๋ฅผ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ํ๋๋ ์ด์ ๋ง์คํฐํ๊ธฐ: ๊ณต์ ์ค์ฝํ์ ์์กด์ฑ ๊ณต์ ์ ํ
๋น ๋ฅด๊ฒ ๋ฐ์ ํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ํ์ฅ ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ค๋ฉด ์ ๊ตํ ์ํคํ ์ฒ ํจํด์ ์ฑํํด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ๊ทธ์ค์์๋ ๋ง์ดํฌ๋กํ๋ก ํธ์๋ ๊ฐ๋ ์ ์๋นํ ์ฃผ๋ชฉ์ ๋ฐ์์ผ๋ฉฐ, ์ด๋ฅผ ํตํด ํ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ ๋ถ๋ถ์ ๋ ๋ฆฝ์ ์ผ๋ก ๊ฐ๋ฐํ๊ณ ๋ฐฐํฌํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋ ๋ฆฝ์ ์ธ ๋จ์๋ค ๊ฐ์ ์ํํ ํตํฉ๊ณผ ํจ์จ์ ์ธ ์ฝ๋ ๊ณต์ ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํ๋ ํต์ฌ์๋ Webpack์ ๋ชจ๋ ํ๋๋ ์ด์ ํ๋ฌ๊ทธ์ธ์ด ์์ผ๋ฉฐ, ๊ทธ ๊ฐ๋ ฅํจ์ ํต์ฌ ์์๋ ๋ฐ๋ก ๊ณต์ ์ค์ฝํ(shared scope)์ ๋๋ค.
์ด ์ข ํฉ ๊ฐ์ด๋์์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ํ๋๋ ์ด์ ๋ด์ ๊ณต์ ์ค์ฝํ ๋ฉ์ปค๋์ฆ์ ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃน๋๋ค. ์ฐ๋ฆฌ๋ ๊ทธ๊ฒ์ด ๋ฌด์์ธ์ง, ์ ์์กด์ฑ ๊ณต์ ์ ํ์์ ์ธ์ง, ์ด๋ป๊ฒ ์๋ํ๋์ง, ๊ทธ๋ฆฌ๊ณ ํจ๊ณผ์ ์ผ๋ก ๊ตฌํํ๊ธฐ ์ํ ์ค์ฉ์ ์ธ ์ ๋ต์ ํ๊ตฌํ ๊ฒ์ ๋๋ค. ์ฐ๋ฆฌ์ ๋ชฉํ๋ ๊ฐ๋ฐ์๋ค์ด ์ด ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ํ์ฉํ์ฌ ๋ค์ํ ๊ธ๋ก๋ฒ ๊ฐ๋ฐํ ์ ๋ฐ์ ๊ฑธ์ณ ์ฑ๋ฅ์ ํฅ์์ํค๊ณ , ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ด๋ฉฐ, ๊ฐ๋ฐ์ ๊ฒฝํ์ ๊ฐ์ ํ ์ ์๋ ์ง์์ ๊ฐ์ถ๋๋ก ํ๋ ๊ฒ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ํ๋๋ ์ด์ ์ด๋ ๋ฌด์์ธ๊ฐ?
๊ณต์ ์ค์ฝํ์ ๋ํด ์์๋ณด๊ธฐ ์ ์, ๋ชจ๋ ํ๋๋ ์ด์ ์ ๊ธฐ๋ณธ ๊ฐ๋ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. Webpack 5์ ํจ๊ป ๋์ ๋ ๋ชจ๋ ํ๋๋ ์ด์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ณ๋๋ก ์ปดํ์ผ๋ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ์ ์ฝ๋(๋ผ์ด๋ธ๋ฌ๋ฆฌ, ํ๋ ์์ํฌ ๋๋ ์ ์ฒด ์ปดํฌ๋ํธ ๋ฑ)๋ฅผ ๋์ ์ผ๋ก ๊ณต์ ํ ์ ์๊ฒ ํด์ฃผ๋ ๋น๋ ํ์ ๋ฐ ๋ฐํ์ ์๋ฃจ์ ์ ๋๋ค. ์ด๋ ์ฌ๋ฌ ๊ฐ์ ๊ฐ๋ณ ์ ํ๋ฆฌ์ผ์ด์ ('remotes' ๋๋ 'consumers'๋ผ๊ณ ๋ ํจ)์ด 'container' ๋๋ 'host' ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก๋ถํฐ ์ฝ๋๋ฅผ ๋ก๋ํ ์ ์๊ณ , ๊ทธ ๋ฐ๋๋ ๊ฐ๋ฅํ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
๋ชจ๋ ํ๋๋ ์ด์ ์ ์ฃผ์ ์ด์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ฝ๋ ๊ณต์ : ์ฌ๋ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฑธ์ณ ์ค๋ณต๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ์ฌ ์ ์ฒด ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ๋ก๋ ์๊ฐ์ ๊ฐ์ ํฉ๋๋ค.
- ๋ ๋ฆฝ์ ์ธ ๋ฐฐํฌ: ํ์ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ๋ถ๋ถ์ ๋ ๋ฆฝ์ ์ผ๋ก ๊ฐ๋ฐํ๊ณ ๋ฐฐํฌํ์ฌ ๋ฏผ์ฒฉ์ฑ๊ณผ ๋ ๋น ๋ฅธ ๋ฆด๋ฆฌ์ค ์ฃผ๊ธฐ๋ฅผ ์ด์งํ ์ ์์ต๋๋ค.
- ๊ธฐ์ ๋ถ๊ฐ์ง์ฑ: ์ฃผ๋ก Webpack๊ณผ ํจ๊ป ์ฌ์ฉ๋์ง๋ง, ์ด๋ ์ ๋ ๋ค๋ฅธ ๋น๋ ๋๊ตฌ๋ ํ๋ ์์ํฌ ๊ฐ์ ๊ณต์ ๋ฅผ ์ฉ์ดํ๊ฒ ํ์ฌ ์ ์ฐ์ฑ์ ์ฆ์ง์ํต๋๋ค.
- ๋ฐํ์ ํตํฉ: ๋ฐํ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ฑํ ์ ์์ด ๋์ ์ ๋ฐ์ดํธ์ ์ ์ฐํ ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์กฐ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
๋ฌธ์ ์ : ๋ง์ดํฌ๋กํ๋ก ํธ์๋์์์ ์ค๋ณต ์์กด์ฑ
์ฌ๋ฌ ๋ง์ดํฌ๋กํ๋ก ํธ์๋๊ฐ ๋ชจ๋ React์ ๊ฐ์ ์ธ๊ธฐ ์๋ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ Redux์ ๊ฐ์ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋์ผํ ๋ฒ์ ์ ์์กดํ๋ ์๋๋ฆฌ์ค๋ฅผ ์๊ฐํด ๋ณด์ญ์์ค. ๊ณต์ ๋ฉ์ปค๋์ฆ์ด ์๋ค๋ฉด, ๊ฐ ๋ง์ดํฌ๋กํ๋ก ํธ์๋๋ ์ด๋ฌํ ์์กด์ฑ์ ์์ฒด ๋ณต์ฌ๋ณธ์ ๋ฒ๋ค๋งํ ๊ฒ์ ๋๋ค. ์ด๋ ๋ค์๊ณผ ๊ฐ์ ๋ฌธ์ ๋ก ์ด์ด์ง๋๋ค:
- ๋น๋ํด์ง ๋ฒ๋ค ํฌ๊ธฐ: ๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ณตํต ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ถํ์ํ๊ฒ ๋ณต์ ํ์ฌ ์ฌ์ฉ์์ ๋ค์ด๋ก๋ ํฌ๊ธฐ๊ฐ ์ปค์ง๋๋ค.
- ๋ฉ๋ชจ๋ฆฌ ์๋น ์ฆ๊ฐ: ๋ธ๋ผ์ฐ์ ์ ๋ก๋๋ ๋์ผํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ฌ๋ฌ ์ธ์คํด์ค๊ฐ ๋ ๋ง์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์๋นํ ์ ์์ต๋๋ค.
- ์ผ๊ด๋์ง ์์ ๋์: ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ์ ๊ณต์ ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฒ์ ์ด ๋ค๋ฅด๋ฉด ๋ฏธ๋ฌํ ๋ฒ๊ทธ์ ํธํ์ฑ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
- ๋คํธ์ํฌ ๋ฆฌ์์ค ๋ญ๋น: ์ฌ์ฉ์๊ฐ ๋ค๋ฅธ ๋ง์ดํฌ๋กํ๋ก ํธ์๋ ์ฌ์ด๋ฅผ ์ด๋ํ ๊ฒฝ์ฐ ๋์ผํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ๋ฌ ๋ฒ ๋ค์ด๋ก๋ํ ์ ์์ต๋๋ค.
๋ฐ๋ก ์ด ์ง์ ์์ ๋ชจ๋ ํ๋๋ ์ด์ ์ ๊ณต์ ์ค์ฝํ๊ฐ ์ด๋ฌํ ๋ฌธ์ ๋ค์ ๋ํ ์ฐ์ํ ํด๊ฒฐ์ฑ ์ ์ ์ํ๋ฉฐ ์ค์ํ ์ญํ ์ ํฉ๋๋ค.
๋ชจ๋ ํ๋๋ ์ด์ ์ ๊ณต์ ์ค์ฝํ ์ดํดํ๊ธฐ
๋ชจ๋ ํ๋๋ ์ด์
ํ๋ฌ๊ทธ์ธ ๋ด์ shared ์ต์
์ ํตํด ๊ตฌ์ฑ๋๋ ๊ณต์ ์ค์ฝํ๋ ์ฌ๋ฌ ๋
๋ฆฝ์ ์ผ๋ก ๋ฐฐํฌ๋ ์ ํ๋ฆฌ์ผ์ด์
์ด ์์กด์ฑ์ ๊ณต์ ํ ์ ์๊ฒ ํ๋ ๋ฉ์ปค๋์ฆ์
๋๋ค. ๊ตฌ์ฑ๋๋ฉด, ๋ชจ๋ ํ๋๋ ์ด์
์ ์ง์ ๋ ์์กด์ฑ์ ๋จ์ผ ์ธ์คํด์ค๋ง ๋ก๋๋์ด ์ด๋ฅผ ํ์๋ก ํ๋ ๋ชจ๋ ์ ํ๋ฆฌ์ผ์ด์
์์ ์ฌ์ฉํ ์ ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
ํต์ฌ์ ์ผ๋ก, ๊ณต์ ์ค์ฝํ๋ ๊ณต์ ๋ชจ๋์ ์ํ ์ ์ญ ๋ ์ง์คํธ๋ฆฌ ๋๋ ์ปจํ ์ด๋๋ฅผ ์์ฑํ์ฌ ์๋ํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ณต์ ์์กด์ฑ์ ์์ฒญํ๋ฉด, ๋ชจ๋ ํ๋๋ ์ด์ ์ ์ด ๋ ์ง์คํธ๋ฆฌ๋ฅผ ํ์ธํฉ๋๋ค. ๋ง์ฝ ์์กด์ฑ์ด ์ด๋ฏธ ์กด์ฌํ๋ค๋ฉด(์ฆ, ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ์ด๋ ํธ์คํธ์ ์ํด ๋ก๋๋์๋ค๋ฉด), ๊ธฐ์กด ์ธ์คํด์ค๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด, ์์กด์ฑ์ ๋ก๋ํ๊ณ ๋์ค์ ์ฌ์ฉํ ์ ์๋๋ก ๊ณต์ ์ค์ฝํ์ ๋ฑ๋กํฉ๋๋ค.
์ผ๋ฐ์ ์ธ ๊ตฌ์ฑ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
// webpack.config.js
const { ModuleFederationPlugin } = require('webpack');
module.exports = {
// ... other webpack configurations
plugins: [
new ModuleFederationPlugin({
name: 'container',
remotes: {
'app1': 'app1@http://localhost:3001/remoteEntry.js',
'app2': 'app2@http://localhost:3002/remoteEntry.js',
},
shared: {
'react': {
singleton: true,
eager: true,
requiredVersion: '^18.0.0',
},
'react-dom': {
singleton: true,
eager: true,
requiredVersion: '^18.0.0',
},
},
}),
],
};
๊ณต์ ์์กด์ฑ์ ์ํ ์ฃผ์ ๊ตฌ์ฑ ์ต์ :
singleton: true: ์๋ง๋ ๊ฐ์ฅ ์ค์ํ ์ต์ ์ผ ๊ฒ์ ๋๋ค.true๋ก ์ค์ ํ๋ฉด, ๋ชจ๋ ์๋น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฑธ์ณ ๊ณต์ ์์กด์ฑ์ ๋จ์ผ ์ธ์คํด์ค๋ง ๋ก๋๋๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ฌ๋ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋์ผํ ์ฑ๊ธํค ์์กด์ฑ์ ๋ก๋ํ๋ ค๊ณ ์๋ํ๋ฉด, ๋ชจ๋ ํ๋๋ ์ด์ ์ ๊ทธ๋ค์๊ฒ ๋์ผํ ์ธ์คํด์ค๋ฅผ ์ ๊ณตํฉ๋๋ค.eager: true: ๊ธฐ๋ณธ์ ์ผ๋ก ๊ณต์ ์์กด์ฑ์ ์ง์ฐ ๋ก๋(lazily loaded)๋ฉ๋๋ค. ์ฆ, ๋ช ์์ ์ผ๋ก ์ํฌํธ๋๊ฑฐ๋ ์ฌ์ฉ๋ ๋๋ง ๊ฐ์ ธ์ต๋๋ค.eager: true๋ก ์ค์ ํ๋ฉด, ์ฆ์ ์ฌ์ฉ๋์ง ์๋๋ผ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์์๋์๋ง์ ์์กด์ฑ์ด ๊ฐ์ ๋ก ๋ก๋๋ฉ๋๋ค. ์ด๋ ํ๋ ์์ํฌ์ ๊ฐ์ ์ค์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ฒ์๋ถํฐ ์ฌ์ฉ ๊ฐ๋ฅํ๋๋ก ๋ณด์ฅํ๋ ๋ฐ ์ ์ฉํ ์ ์์ต๋๋ค.requiredVersion: '...': ์ด ์ต์ ์ ๊ณต์ ์์กด์ฑ์ ํ์ ๋ฒ์ ์ ์ง์ ํฉ๋๋ค. ๋ชจ๋ ํ๋๋ ์ด์ ์ ์์ฒญ๋ ๋ฒ์ ์ ๋ง์ถ๋ ค๊ณ ์๋ํฉ๋๋ค. ๋ง์ฝ ์ฌ๋ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ค๋ฅธ ๋ฒ์ ์ ์๊ตฌํ๋ฉด, ๋ชจ๋ ํ๋๋ ์ด์ ์ ์ด๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํ ๋ฉ์ปค๋์ฆ์ ๊ฐ์ง๊ณ ์์ต๋๋ค(๋์ค์ ๋ ผ์).version: '...': ๊ณต์ ์ค์ฝํ์ ๊ฒ์๋ ์์กด์ฑ์ ๋ฒ์ ์ ๋ช ์์ ์ผ๋ก ์ค์ ํ ์ ์์ต๋๋ค.import: false: ์ด ์ค์ ์ ๋ชจ๋ ํ๋๋ ์ด์ ์๊ฒ ๊ณต์ ์์กด์ฑ์ ์๋์ผ๋ก ๋ฒ๋ค๋งํ์ง ์๋๋ก ์ง์ํฉ๋๋ค. ๋์ , ์ธ๋ถ์์ ์ ๊ณต๋ ๊ฒ์ผ๋ก ์์ํฉ๋๋ค(์ด๋ ๊ณต์ ์ ๊ธฐ๋ณธ ๋์์ ๋๋ค).packageDir: '...': ๊ณต์ ์์กด์ฑ์ ํด๊ฒฐํ ํจํค์ง ๋๋ ํ ๋ฆฌ๋ฅผ ์ง์ ํ๋ฉฐ, ๋ชจ๋ ธ๋ ํฌ์์ ์ ์ฉํฉ๋๋ค.
๊ณต์ ์ค์ฝํ๊ฐ ์์กด์ฑ ๊ณต์ ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํ๋ ๋ฐฉ๋ฒ
์ค์ฉ์ ์ธ ์์ ๋ฅผ ํตํด ๊ทธ ๊ณผ์ ์ ๋ถ์ํด ๋ณด๊ฒ ์ต๋๋ค. ๋ฉ์ธ '์ปจํ ์ด๋' ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๋ ๊ฐ์ '์๊ฒฉ' ์ ํ๋ฆฌ์ผ์ด์ , `app1`๊ณผ `app2`๊ฐ ์๋ค๊ณ ์์ํด ๋ณด์ญ์์ค. ์ธ ์ ํ๋ฆฌ์ผ์ด์ ๋ชจ๋ `react`์ `react-dom` ๋ฒ์ 18์ ์์กดํฉ๋๋ค.
์๋๋ฆฌ์ค 1: ์ปจํ ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์์กด์ฑ์ ๊ณต์ ํ๋ ๊ฒฝ์ฐ
์ด ์ผ๋ฐ์ ์ธ ์ค์ ์์, ์ปจํ ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ณต์ ์์กด์ฑ์ ์ ์ํฉ๋๋ค. ๋ชจ๋ ํ๋๋ ์ด์ ์ ์ํด ์์ฑ๋ `remoteEntry.js` ํ์ผ์ ์ด๋ฌํ ๊ณต์ ๋ชจ๋์ ๋ ธ์ถํฉ๋๋ค.
์ปจํ ์ด๋์ Webpack ์ค์ (`container/webpack.config.js`):
const { ModuleFederationPlugin } = require('webpack');
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
name: 'container',
filename: 'remoteEntry.js',
exposes: {
'./App': './src/App',
},
shared: {
'react': {
singleton: true,
eager: true,
requiredVersion: '^18.0.0',
},
'react-dom': {
singleton: true,
eager: true,
requiredVersion: '^18.0.0',
},
},
}),
],
};
์ด์ , `app1`๊ณผ `app2`๋ ์ด๋ฌํ ๊ณต์ ์์กด์ฑ์ ์๋นํ๊ฒ ๋ฉ๋๋ค.
`app1`์ Webpack ์ค์ (`app1/webpack.config.js`):
const { ModuleFederationPlugin } = require('webpack');
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
name: 'app1',
filename: 'remoteEntry.js',
exposes: {
'./Feature1': './src/Feature1',
},
remotes: {
'container': 'container@http://localhost:3000/remoteEntry.js',
},
shared: {
'react': {
singleton: true,
requiredVersion: '^18.0.0',
},
'react-dom': {
singleton: true,
requiredVersion: '^18.0.0',
},
},
}),
],
};
`app2`์ Webpack ์ค์ (`app2/webpack.config.js`):
`app2`์ ๊ตฌ์ฑ์ `app1`๊ณผ ์ ์ฌํ๋ฉฐ, `react`์ `react-dom`์ ๋์ผํ ๋ฒ์ ์๊ตฌ์ฌํญ์ผ๋ก ๊ณต์ ํ๋๋ก ์ ์ธํฉ๋๋ค.
๋ฐํ์์์์ ์๋ ๋ฐฉ์:
- ์ปจํ ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋จผ์ ๋ก๋๋์ด, ๊ณต์ ๋ `react` ๋ฐ `react-dom` ์ธ์คํด์ค๋ฅผ ๋ชจ๋ ํ๋๋ ์ด์ ์ค์ฝํ์์ ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค.
- `app1`์ด ๋ก๋๋ ๋, `react`์ `react-dom`์ ์์ฒญํฉ๋๋ค. `app1`์ ๋ชจ๋ ํ๋๋ ์ด์ ์ ์ด๋ค์ด ๊ณต์ ๋๊ณ `singleton: true`๋ก ํ์๋ ๊ฒ์ ํ์ธํฉ๋๋ค. ์ ์ญ ์ค์ฝํ์์ ๊ธฐ์กด ์ธ์คํด์ค๋ฅผ ํ์ธํฉ๋๋ค. ๋ง์ฝ ์ปจํ ์ด๋๊ฐ ์ด๋ฏธ ๋ก๋ํ๋ค๋ฉด, `app1`์ ํด๋น ์ธ์คํด์ค๋ฅผ ์ฌ์ฌ์ฉํฉ๋๋ค.
- ๋ง์ฐฌ๊ฐ์ง๋ก, `app2`๊ฐ ๋ก๋๋ ๋๋ ๋์ผํ `react` ๋ฐ `react-dom` ์ธ์คํด์ค๋ฅผ ์ฌ์ฌ์ฉํฉ๋๋ค.
์ด ๊ฒฐ๊ณผ๋ก ๋ธ๋ผ์ฐ์ ์๋ `react`์ `react-dom`์ ๋จ ํ๋์ ๋ณต์ฌ๋ณธ๋ง ๋ก๋๋์ด ์ด ๋ค์ด๋ก๋ ํฌ๊ธฐ๊ฐ ํฌ๊ฒ ์ค์ด๋ญ๋๋ค.
์๋๋ฆฌ์ค 2: ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ ์์กด์ฑ ๊ณต์
๋ชจ๋ ํ๋๋ ์ด์ ์ ๋ํ ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ๋ค์ด ์๋ก ์์กด์ฑ์ ๊ณต์ ํ ์ ์๋๋ก ํฉ๋๋ค. ๋ง์ฝ `app1`๊ณผ `app2`๊ฐ ์ปจํ ์ด๋์ ์ํด ๊ณต์ ๋์ง *์๋* ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด, ๋ ์ ํ๋ฆฌ์ผ์ด์ ๋ชจ๋ ๊ฐ์์ ์ค์ ์์ ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ณต์ ํ๋๋ก ์ ์ธํ๋ฉด ์ฌ์ ํ ๊ณต์ ํ ์ ์์ต๋๋ค.
์์: `app1`๊ณผ `app2`๊ฐ ๋ชจ๋ ์ ํธ๋ฆฌํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ `lodash`๋ฅผ ์ฌ์ฉํ๋ค๊ณ ๊ฐ์ ํด ๋ด ์๋ค.
`app1`์ Webpack ์ค์ (lodash ์ถ๊ฐ):
// ... within ModuleFederationPlugin for app1
shared: {
// ... react, react-dom
'lodash': {
singleton: true,
requiredVersion: '^4.17.21',
},
},
`app2`์ Webpack ์ค์ (lodash ์ถ๊ฐ):
// ... within ModuleFederationPlugin for app2
shared: {
// ... react, react-dom
'lodash': {
singleton: true,
requiredVersion: '^4.17.21',
},
},
์ด ๊ฒฝ์ฐ, ์ปจํ ์ด๋๊ฐ `lodash`๋ฅผ ๋ช ์์ ์ผ๋ก ๊ณต์ ํ์ง ์๋๋ผ๋, `app1`๊ณผ `app2`๋ ๋์ผํ ๋ธ๋ผ์ฐ์ ์ปจํ ์คํธ์์ ๋ก๋๋๋ค๋ฉด ์๋ก `lodash`์ ๋จ์ผ ์ธ์คํด์ค๋ฅผ ๊ณต์ ํ ์ ์์ต๋๋ค.
๋ฒ์ ๋ถ์ผ์น ์ฒ๋ฆฌํ๊ธฐ
์์กด์ฑ ๊ณต์ ์์ ๊ฐ์ฅ ํํ ๋ฌธ์ ์ค ํ๋๋ ๋ฒ์ ํธํ์ฑ์ ๋๋ค. ๋ง์ฝ `app1`์ด `react` v18.1.0์ ์๊ตฌํ๊ณ `app2`๊ฐ `react` v18.2.0์ ์๊ตฌํ๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น์? ๋ชจ๋ ํ๋๋ ์ด์ ์ ์ด๋ฌํ ์๋๋ฆฌ์ค๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ์ ๋ต์ ์ ๊ณตํฉ๋๋ค.
1. ์๊ฒฉํ ๋ฒ์ ๋งค์นญ (`requiredVersion`์ ๊ธฐ๋ณธ ๋์)
์ ํํ ๋ฒ์ (์: '18.1.0')์ด๋ ์๊ฒฉํ ๋ฒ์(์: '^18.1.0')๋ฅผ ์ง์ ํ๋ฉด, ๋ชจ๋ ํ๋๋ ์ด์
์ ์ด๋ฅผ ๊ฐ์ ํฉ๋๋ค. ๋ง์ฝ ์ ํ๋ฆฌ์ผ์ด์
์ด ์ด๋ฏธ ์ฌ์ฉ ์ค์ธ ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์
์ ์๊ตฌ์ฌํญ์ ๋ง์กฑํ์ง ๋ชปํ๋ ๋ฒ์ ์ ๊ณต์ ์์กด์ฑ์ ๋ก๋ํ๋ ค๊ณ ํ๋ฉด, ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
2. ๋ฒ์ ๋ฒ์ ๋ฐ ํด๋ฐฑ
requiredVersion ์ต์
์ ์๋งจํฑ ๋ฒ์ ๋(SemVer) ๋ฒ์๋ฅผ ์ง์ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, '^18.0.0'์ 18.0.0๋ถํฐ 19.0.0 ๋ฏธ๋ง๊น์ง์ ๋ชจ๋ ๋ฒ์ ์ ์๋ฏธํฉ๋๋ค. ์ฌ๋ฌ ์ ํ๋ฆฌ์ผ์ด์
์ด ์ด ๋ฒ์ ๋ด์ ๋ฒ์ ์ ์๊ตฌํ๋ ๊ฒฝ์ฐ, ๋ชจ๋ ํ๋๋ ์ด์
์ ์ผ๋ฐ์ ์ผ๋ก ๋ชจ๋ ์๊ตฌ์ฌํญ์ ๋ง์กฑํ๋ ๊ฐ์ฅ ๋์ ํธํ ๋ฒ์ ์ ์ฌ์ฉํฉ๋๋ค.
๋ค์๊ณผ ๊ฐ์ ๊ฒฝ์ฐ๋ฅผ ๊ณ ๋ คํด ๋ด ์๋ค:
- ์ปจํ
์ด๋:
shared: { 'react': { requiredVersion: '^18.0.0' } } - `app1`:
shared: { 'react': { requiredVersion: '^18.1.0' } } - `app2`:
shared: { 'react': { requiredVersion: '^18.2.0' } }
๋ง์ฝ ์ปจํ ์ด๋๊ฐ ๋จผ์ ๋ก๋๋๋ฉด, `react` v18.0.0(๋๋ ์ค์ ๋ก ๋ฒ๋ค๋งํ ๋ฒ์ )์ ์ค์ ํฉ๋๋ค. `app1`์ด `^18.1.0`์ผ๋ก `react`๋ฅผ ์์ฒญํ ๋, ์ปจํ ์ด๋์ ๋ฒ์ ์ด 18.1.0๋ณด๋ค ๋ฎ์ผ๋ฉด ์คํจํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ `app1`์ด ๋จผ์ ๋ก๋๋์ด `react` v18.1.0์ ์ ๊ณตํ๊ณ , ๊ทธ ๋ค์ `app2`๊ฐ `^18.2.0`์ผ๋ก `react`๋ฅผ ์์ฒญํ๋ฉด, ๋ชจ๋ ํ๋๋ ์ด์ ์ `app2`์ ์๊ตฌ์ฌํญ์ ๋ง์กฑ์ํค๋ ค๊ณ ์๋ํ ๊ฒ์ ๋๋ค. ๋ง์ฝ `react` v18.1.0 ์ธ์คํด์ค๊ฐ ์ด๋ฏธ ๋ก๋๋์ด ์๋ค๋ฉด, v18.1.0์ด `^18.2.0`์ ๋ง์กฑํ์ง ์๊ธฐ ๋๋ฌธ์ ์ค๋ฅ๋ฅผ ๋ฐ์์ํฌ ์ ์์ต๋๋ค.
์ด๋ฅผ ์ํํ๊ธฐ ์ํด, ๊ณต์ ์์กด์ฑ์ ๊ฐ์ฅ ๋์ ํ์ฉ ๊ฐ๋ฅํ ๋ฒ์ ๋ฒ์๋ก ์ ์ํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ด๋ฉฐ, ์ด๋ ๋ณดํต ์ปจํ
์ด๋ ์ ํ๋ฆฌ์ผ์ด์
์์ ์ด๋ฃจ์ด์ง๋๋ค. ์๋ฅผ ๋ค์ด, '^18.0.0'์ ์ฌ์ฉํ๋ฉด ์ ์ฐ์ฑ์ ํ๋ณดํ ์ ์์ต๋๋ค. ๋ง์ฝ ํน์ ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์
์ด ๋ ์๋ก์ด ํจ์น ๋ฒ์ ์ ๋ํ ๊ฐ๋ ฅํ ์์กด์ฑ์ ๊ฐ์ง๊ณ ์๋ค๋ฉด, ํด๋น ๋ฒ์ ์ ๋ช
์์ ์ผ๋ก ์ ๊ณตํ๋๋ก ๊ตฌ์ฑํด์ผ ํฉ๋๋ค.
3. `shareKey`์ `shareScope` ์ฌ์ฉํ๊ธฐ
๋ชจ๋ ํ๋๋ ์ด์ ์ ๋ํ ๋ชจ๋์ด ๊ณต์ ๋๋ ํค์ ๊ทธ๊ฒ์ด ์ํ ์ค์ฝํ๋ฅผ ์ ์ดํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ ๊ณ ๊ธ ์๋๋ฆฌ์ค์์ ์ ์ฉํ ์ ์์ผ๋ฉฐ, ์๋ฅผ ๋ค์ด ๋์ผํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ค๋ฅธ ๋ฒ์ ์ ๋ค๋ฅธ ํค๋ก ๊ณต์ ํ๋ ๊ฒฝ์ฐ์ ์ฌ์ฉ๋ฉ๋๋ค.
4. `strictVersion` ์ต์
strictVersion์ด ํ์ฑํ๋๋ฉด(`requiredVersion`์ ๊ธฐ๋ณธ๊ฐ), ๋ชจ๋ ํ๋๋ ์ด์
์ ์์กด์ฑ์ด ๋ง์กฑ๋ ์ ์์ ๋ ์ค๋ฅ๋ฅผ ๋ฐ์์ํต๋๋ค. strictVersion: false๋ก ์ค์ ํ๋ฉด ๋ ๊ด๋ํ ๋ฒ์ ์ฒ๋ฆฌ๋ฅผ ํ์ฉํ ์ ์์ผ๋ฉฐ, ์ด ๊ฒฝ์ฐ ๋ชจ๋ ํ๋๋ ์ด์
์ ์๋ก์ด ๋ฒ์ ์ด ์์ ๋ ์ด์ ๋ฒ์ ์ ์ฌ์ฉํ๋ ค๊ณ ์๋ํ ์ ์์ง๋ง, ์ด๋ ๋ฐํ์ ์ค๋ฅ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
๊ณต์ ์ค์ฝํ ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
๋ชจ๋ ํ๋๋ ์ด์ ์ ๊ณต์ ์ค์ฝํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ๊ณ ์ผ๋ฐ์ ์ธ ํจ์ ์ ํผํ๋ ค๋ฉด, ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ๊ณต์ ์์กด์ฑ ์ค์ํ: ์ฃผ์ ์ ํ๋ฆฌ์ผ์ด์ (์ฃผ๋ก ์ปจํ ์ด๋ ๋๋ ์ ์ฉ ๊ณต์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ํ๋ฆฌ์ผ์ด์ )์ ์ง์ ํ์ฌ ํ๋ ์์ํฌ(React, Vue, Angular), UI ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ฐ์ ๊ณตํต์ ์ด๊ณ ์์ ์ ์ธ ์์กด์ฑ์ ์ง์ค ๊ณต๊ธ์์ผ๋ก ์ผ์ผ์ญ์์ค.
- ๋์ ๋ฒ์ ๋ฒ์ ์ ์: ์ฃผ์ ๊ณต์ ์ ํ๋ฆฌ์ผ์ด์
์์ ๊ณต์ ์์กด์ฑ์ ๋ํด SemVer ๋ฒ์(์:
'^18.0.0')๋ฅผ ์ฌ์ฉํ์ญ์์ค. ์ด๋ฅผ ํตํด ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ๋ค์ด ์ ์ฒด ์ํ๊ณ์ ๊ฑธ์ณ ์๊ฒฉํ ์ ๋ฐ์ดํธ๋ฅผ ๊ฐ์ ํ์ง ์๊ณ ๋ ํธํ๋๋ ๋ฒ์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. - ๊ณต์ ์์กด์ฑ ๋ช ํํ ๋ฌธ์ํ: ์ด๋ค ์์กด์ฑ์ด ๊ณต์ ๋๋์ง, ๊ทธ ๋ฒ์ ์ ๋ฌด์์ธ์ง, ๊ทธ๋ฆฌ๊ณ ์ด๋ค ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ทธ๊ฒ๋ค์ ๊ณต์ ํ๋ ์ฑ ์์ด ์๋์ง์ ๋ํ ๋ช ํํ ๋ฌธ์๋ฅผ ์ ์งํ์ญ์์ค. ์ด๋ ํ์ด ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ์ดํดํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ๋ฒ๋ค ํฌ๊ธฐ ๋ชจ๋ํฐ๋ง: ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ ๊ธฐ์ ์ผ๋ก ๋ถ์ํ์ญ์์ค. ๋ชจ๋ ํ๋๋ ์ด์ ์ ๊ณต์ ์ค์ฝํ๋ ๊ณตํต ์์กด์ฑ์ด ์ธ๋ถํ๋๋ฉด์ ๋์ ์ผ๋ก ๋ก๋๋๋ ์ฒญํฌ์ ํฌ๊ธฐ๋ฅผ ์ค์ฌ์ผ ํฉ๋๋ค.
- ๋น๊ฒฐ์ ์ ์์กด์ฑ ๊ด๋ฆฌ: ์์ฃผ ์ ๋ฐ์ดํธ๋๊ฑฐ๋ ๋ถ์์ ํ API๋ฅผ ๊ฐ์ง ์์กด์ฑ์ ์ฃผ์ํ์ญ์์ค. ์ด๋ฌํ ์์กด์ฑ์ ๊ณต์ ํ๋ฉด ๋ ์ ์คํ ๋ฒ์ ๊ด๋ฆฌ์ ํ ์คํธ๊ฐ ํ์ํ ์ ์์ต๋๋ค.
- `eager: true` ์ ์คํ๊ฒ ์ฌ์ฉํ๊ธฐ: `eager: true`๋ ์์กด์ฑ์ด ์กฐ๊ธฐ์ ๋ก๋๋๋๋ก ๋ณด์ฅํ์ง๋ง, ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ์ด๊ธฐ ๋ก๋ ํฌ๊ธฐ๊ฐ ์ปค์ง ์ ์์ต๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์์์ ํ์์ ์ธ ์ค์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ง ์ฌ์ฉํ์ญ์์ค.
- ํ ์คํธ๋ ์ค์ํฉ๋๋ค: ๋ง์ดํฌ๋กํ๋ก ํธ์๋์ ํตํฉ์ ์ฒ ์ ํ ํ ์คํธํ์ญ์์ค. ๊ณต์ ์์กด์ฑ์ด ์ฌ๋ฐ๋ฅด๊ฒ ๋ก๋๋๊ณ ๋ฒ์ ์ถฉ๋์ด ์ํํ๊ฒ ์ฒ๋ฆฌ๋๋์ง ํ์ธํ์ญ์์ค. ํตํฉ ๋ฐ ์๋ํฌ์๋ ํ ์คํธ๋ฅผ ํฌํจํ ์๋ํ๋ ํ ์คํธ๋ ํ์์ ์ ๋๋ค.
- ๋จ์์ฑ์ ์ํด ๋ชจ๋ ธ๋ ํฌ ๊ณ ๋ ค: ๋ชจ๋ ํ๋๋ ์ด์ ์ ์์ํ๋ ํ์ ๊ฒฝ์ฐ, ๋ชจ๋ ธ๋ ํฌ(Lerna ๋๋ Yarn Workspaces์ ๊ฐ์ ๋๊ตฌ ์ฌ์ฉ) ๋ด์์ ๊ณต์ ์์กด์ฑ์ ๊ด๋ฆฌํ๋ฉด ์ค์ ์ ๋จ์ํํ๊ณ ์ผ๊ด์ฑ์ ๋ณด์ฅํ ์ ์์ต๋๋ค. `packageDir` ์ต์ ์ ์ฌ๊ธฐ์ ํนํ ์ ์ฉํฉ๋๋ค.
- `shareKey` ๋ฐ `shareScope`๋ก ์ฃ์ง ์ผ์ด์ค ์ฒ๋ฆฌ: ๋ณต์กํ ๋ฒ์ ๊ด๋ฆฌ ์๋๋ฆฌ์ค์ ์ง๋ฉดํ๊ฑฐ๋ ๋์ผํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ค๋ฅธ ๋ฒ์ ์ ๋ ธ์ถํด์ผ ํ๋ ๊ฒฝ์ฐ, ๋ ์ธ๋ถํ๋ ์ ์ด๋ฅผ ์ํด `shareKey` ๋ฐ `shareScope` ์ต์ ์ ํ์ํ์ญ์์ค.
- ๋ณด์ ๊ณ ๋ ค์ฌํญ: ๊ณต์ ์์กด์ฑ์ด ์ ๋ขฐํ ์ ์๋ ์์ค์์ ๊ฐ์ ธ์ค๋์ง ํ์ธํ์ญ์์ค. ๋น๋ ํ์ดํ๋ผ์ธ ๋ฐ ๋ฐฐํฌ ํ๋ก์ธ์ค์ ๋ํ ๋ณด์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ตฌํํ์ญ์์ค.
๊ธ๋ก๋ฒ ์ํฅ ๋ฐ ๊ณ ๋ ค์ฌํญ
๊ธ๋ก๋ฒ ๊ฐ๋ฐํ์๊ฒ ๋ชจ๋ ํ๋๋ ์ด์ ๊ณผ ๊ทธ ๊ณต์ ์ค์ฝํ๋ ๋ค์๊ณผ ๊ฐ์ ์๋นํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
- ์ง์ญ ๊ฐ ์ผ๊ด์ฑ: ์ง๋ฆฌ์ ์์น์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์๊ฐ ๋์ผํ ํต์ฌ ์์กด์ฑ์ผ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝํํ๋๋ก ๋ณด์ฅํ์ฌ ์ง์ญ์ ๋ถ์ผ์น๋ฅผ ์ค์ ๋๋ค.
- ๋ ๋น ๋ฅธ ๋ฐ๋ณต ์ฃผ๊ธฐ: ๋ค๋ฅธ ์๊ฐ๋์ ์๋ ํ๋ค์ด ๊ณตํต ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ณต์ ํ๊ฑฐ๋ ์์กด์ฑ ๋ฒ์ ์ ๋ํด ์๋ก์ ์์ ์ ๋ฐฉํดํ ๊ฑฑ์ ์์ด ๋ ๋ฆฝ์ ์ธ ๊ธฐ๋ฅ์ด๋ ๋ง์ดํฌ๋กํ๋ก ํธ์๋์์ ์์ ํ ์ ์์ต๋๋ค.
- ๋ค์ํ ๋คํธ์ํฌ์ ์ต์ ํ: ๊ณต์ ์์กด์ฑ์ ํตํด ์ ์ฒด ๋ค์ด๋ก๋ ํฌ๊ธฐ๋ฅผ ์ค์ด๋ ๊ฒ์ ์ธ๊ณ ์ฌ๋ฌ ์ง์ญ์์ ํํ ๋ณผ ์ ์๋ ๋๋ฆฌ๊ฑฐ๋ ์ข ๋์ ์ธํฐ๋ท ์ฐ๊ฒฐ์ ์ฌ์ฉํ๋ ์ฌ์ฉ์์๊ฒ ํนํ ์ ์ฉํฉ๋๋ค.
- ๊ฐ์ํ๋ ์จ๋ณด๋ฉ: ๋๊ท๋ชจ ํ๋ก์ ํธ์ ์๋ก ํฉ๋ฅํ๋ ๊ฐ๋ฐ์๋ค์ ๊ณตํต ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ช ํํ๊ฒ ์ ์๋๊ณ ๊ณต์ ๋ ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํคํ ์ฒ์ ์์กด์ฑ ๊ด๋ฆฌ๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ ์ ์์ต๋๋ค.
๊ทธ๋ฌ๋ ๊ธ๋ก๋ฒ ํ์ ๋ค์ ์ฌํญ์๋ ์ ์ํด์ผ ํฉ๋๋ค:
- CDN ์ ๋ต: ๊ณต์ ์์กด์ฑ์ด CDN์ ํธ์คํ ๋๋ ๊ฒฝ์ฐ, CDN์ด ๋ชจ๋ ๋์ ์ง์ญ์ ๋ํด ์ํธํ ๊ธ๋ก๋ฒ ๋๋ฌ ๋ฒ์์ ๋ฎ์ ์ง์ฐ ์๊ฐ์ ๊ฐ๋๋ก ํ์ญ์์ค.
- ์คํ๋ผ์ธ ์ง์: ์คํ๋ผ์ธ ๊ธฐ๋ฅ์ด ํ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ, ๊ณต์ ์์กด์ฑ๊ณผ ๊ทธ ์บ์ฑ ๊ด๋ฆฌ๊ฐ ๋ ๋ณต์กํด์ง๋๋ค.
- ๊ท์ ์ค์: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ณต์ ๊ฐ ๋ค๋ฅธ ๊ดํ ๊ถ์ ๊ด๋ จ ์ํํธ์จ์ด ๋ผ์ด์ ์ค ๋๋ ๋ฐ์ดํฐ ๊ฐ์ธ ์ ๋ณด ๋ณดํธ ๊ท์ ์ ์ค์ํ๋์ง ํ์ธํ์ญ์์ค.
์ผ๋ฐ์ ์ธ ํจ์ ๊ณผ ์ด๋ฅผ ํผํ๋ ๋ฐฉ๋ฒ
1. ์๋ชป ๊ตฌ์ฑ๋ `singleton`
๋ฌธ์ ์ : ๋จ ํ๋์ ์ธ์คํด์ค๋ง ๊ฐ์ ธ์ผ ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด singleton: true ์ค์ ์ ์๋ ๊ฒฝ์ฐ.
ํด๊ฒฐ์ฑ
: ์ ํ๋ฆฌ์ผ์ด์
์ ๋ฐ์ ๊ฑธ์ณ ๊ณ ์ ํ๊ฒ ๊ณต์ ํ๋ ค๋ ํ๋ ์์ํฌ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ์ ํธ๋ฆฌํฐ์ ๋ํด ํญ์ singleton: true๋ฅผ ์ค์ ํ์ญ์์ค.
2. ์ผ๊ด์ฑ ์๋ ๋ฒ์ ์๊ตฌ์ฌํญ
๋ฌธ์ ์ : ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ๋ค์ด ๋์ผํ ๊ณต์ ์์กด์ฑ์ ๋ํด ๋งค์ฐ ๋ค๋ฅด๊ณ ํธํ๋์ง ์๋ ๋ฒ์ ๋ฒ์๋ฅผ ์ง์ ํ๋ ๊ฒฝ์ฐ.
ํด๊ฒฐ์ฑ : ํนํ ์ปจํ ์ด๋ ์ฑ์์ ๋ฒ์ ์๊ตฌ์ฌํญ์ ํ์คํํ์ญ์์ค. ๋์ SemVer ๋ฒ์๋ฅผ ์ฌ์ฉํ๊ณ ์์ธ ์ฌํญ์ ๋ฌธ์ํํ์ญ์์ค.
3. ๋นํ์์ ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ณผ๋ํ ๊ณต์
๋ฌธ์ ์ : ๋ชจ๋ ์์ ์ ํธ๋ฆฌํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ณต์ ํ๋ ค๊ณ ์๋ํ์ฌ ๋ณต์กํ ๊ตฌ์ฑ๊ณผ ์ ์ฌ์ ์ธ ์ถฉ๋์ ์ด๋ํ๋ ๊ฒฝ์ฐ.
ํด๊ฒฐ์ฑ : ํฌ๊ณ , ๊ณตํต์ ์ด๋ฉฐ, ์์ ์ ์ธ ์์กด์ฑ ๊ณต์ ์ ์ง์คํ์ญ์์ค. ์๊ณ ๋๋ฌผ๊ฒ ์ฌ์ฉ๋๋ ์ ํธ๋ฆฌํฐ๋ ๋ณต์ก์ฑ์ ํผํ๊ธฐ ์ํด ๋ก์ปฌ์ ๋ฒ๋ค๋งํ๋ ๊ฒ์ด ๋ ๋์ ์ ์์ต๋๋ค.
4. `remoteEntry.js` ํ์ผ์ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ์ง ๋ชปํ๋ ๊ฒฝ์ฐ
๋ฌธ์ ์ : `remoteEntry.js` ํ์ผ์ด ์๋น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ทผํ ์ ์๊ฑฐ๋ ์ฌ๋ฐ๋ฅด๊ฒ ์ ๊ณต๋์ง ์๋ ๊ฒฝ์ฐ.
ํด๊ฒฐ์ฑ : ์๊ฒฉ ์ํธ๋ฆฌ์ ๋ํ ํธ์คํ ์ ๋ต์ด ๊ฒฌ๊ณ ํ๊ณ `remotes` ๊ตฌ์ฑ์ ์ง์ ๋ URL์ด ์ ํํ๊ณ ์ ๊ทผ ๊ฐ๋ฅํ์ง ํ์ธํ์ญ์์ค.
5. `eager: true`์ ์ํฅ ๋ฌด์
๋ฌธ์ ์ : ๋๋ฌด ๋ง์ ์์กด์ฑ์ `eager: true`๋ฅผ ์ค์ ํ์ฌ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ด ๋๋ ค์ง๋ ๊ฒฝ์ฐ.
ํด๊ฒฐ์ฑ : ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๊ธฐ ๋ ๋๋ง์ด๋ ํต์ฌ ๊ธฐ๋ฅ์ ์ ๋์ ์ผ๋ก ์ค์ํ ์์กด์ฑ์๋ง `eager: true`๋ฅผ ์ฌ์ฉํ์ญ์์ค.
๊ฒฐ๋ก
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ํ๋๋ ์ด์
์ ๊ณต์ ์ค์ฝํ๋ ํ๋์ ์ด๊ณ ํ์ฅ ๊ฐ๋ฅํ ์น ์ ํ๋ฆฌ์ผ์ด์
, ํนํ ๋ง์ดํฌ๋กํ๋ก ํธ์๋ ์ํคํ
์ฒ ๋ด์์ ๊ตฌ์ถํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ์
๋๋ค. ํจ์จ์ ์ธ ์์กด์ฑ ๊ณต์ ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํจ์ผ๋ก์จ ์ฝ๋ ์ค๋ณต, ๋น๋ํ, ๋ถ์ผ์น ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ฌ ์ฑ๋ฅ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํต๋๋ค. shared ์ต์
, ํนํ singleton ๋ฐ requiredVersion ์์ฑ์ ์ดํดํ๊ณ ์ฌ๋ฐ๋ฅด๊ฒ ๊ตฌ์ฑํ๋ ๊ฒ์ด ์ด๋ฌํ ์ด์ ์ ์ป๋ ์ด์ ์
๋๋ค.
๊ธ๋ก๋ฒ ๊ฐ๋ฐํ์ด ๋ง์ดํฌ๋กํ๋ก ํธ์๋ ์ ๋ต์ ์ ์ ๋ ๋ง์ด ์ฑํํจ์ ๋ฐ๋ผ, ๋ชจ๋ ํ๋๋ ์ด์ ์ ๊ณต์ ์ค์ฝํ๋ฅผ ๋ง์คํฐํ๋ ๊ฒ์ด ๋ฌด์๋ณด๋ค ์ค์ํด์ก์ต๋๋ค. ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ค์ํ๊ณ , ๋ฒ์ ๊ด๋ฆฌ๋ฅผ ์ ์คํ๊ฒ ํ๋ฉฐ, ์ฒ ์ ํ ํ ์คํธ๋ฅผ ์ํํจ์ผ๋ก์จ, ์ด ๊ธฐ์ ์ ํ์ฉํ์ฌ ๋ค์ํ ๊ตญ์ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ํจ๊ณผ์ ์ผ๋ก ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ๊ฒฌ๊ณ ํ๊ณ ๊ณ ์ฑ๋ฅ์ด๋ฉฐ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
๊ณต์ ์ค์ฝํ์ ํ์ ๋ฐ์๋ค์ด๊ณ , ์กฐ์ง ์ ์ฒด์์ ๋ ํจ์จ์ ์ด๊ณ ํ๋ ฅ์ ์ธ ์น ๊ฐ๋ฐ์ ์ํ ๊ธธ์ ๋ฆ์ผ์ญ์์ค.